<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.时间案例</title>
</head>
<body>
    <button id="showTimeNode">动态显示时间</button>    
    <button id="stopTimeNode">停止</button>
    <div id="textNode"></div>

    <script>
        showTimeNode.onclick = function() {
            showCurrentTime(); // 执行了一次
            // window.clearTime = setInterval(showCurrentTime,1000)
            //  setTimeout(showCurrentTime,1000)
        }
        
        stopTimeNode.onclick = function() {
            if(window.clearTime) {
                clearInterval(window.clearTime)
            }
        }

        /**
         * 展示当前的时间
         */
        function showCurrentTime() {
            // console.dir(arguments);
            var date = new Date();
            var year = date.getFullYear()
            var month = date.getMonth()+1
            month = month<10 ? "0"+month: month
            var day =date.getDate()
            day = day<10 ? "0"+day: day
            var hour = date.getHours()
            hour = hour<10 ? "0"+hour: hour
            var minite =date.getMinutes()
            minite = minite<10 ? "0"+minite: minite
            var second =date.getSeconds()
            second = second<10 ? "0"+second: second
            var html = year+"-"+month+"-"+day+" "+hour+":"+minite+":"+second
            textNode.innerHTML = html;
            // 
            // window.clearTime  = setTimeout(showCurrentTime,1000)
            window.clearTime  = setTimeout(arguments.callee,1000)
        }

    </script>
    
</body>
</html>